<div class="content">
    <nav-position [items]="position"></nav-position>
    <h3>产品列表</h3>

    <div class="ui-helper-clearfix" style="width:100%">
        <button type="button" pButton icon="fa-plus" style="float:right" (click)="add()" label="添加产品"></button>
    </div>

    <div class="form">
        <form>
            <div>
                <label for="searchName">产品名称</label>
                <input type="text" name="name-searchName" id="searchName" pInputText placeholder="请输入产品名称"
                       [(ngModel)]="searchName"/>
            </div>
            <div>
                <label for="searchType">产品类型</label>
                <p-dropdown [style]="{'width': '150px;'}" id="searchType" name="name-searchType" [options]="productsTypes"
                            [(ngModel)]="searchType" placeholder="选择分类"></p-dropdown>
            </div>
            <div>
                <label>创建时间</label>
                <p-calendar name="name-searchBeginTime" [(ngModel)]="searchBeginTime" [showIcon]="true" dateFormat="yy-mm-dd"
                            [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
                <div class="intervalLine">-</div>
                <p-calendar name="name-searchEndTime" [(ngModel)]="searchEndTime" [showIcon]="true" dateFormat="yy-mm-dd"
                            [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030"></p-calendar>
            </div>
            <div>
                <button pButton type="button" label="搜索" (click)="search()"></button>
            </div>
            <div>
                <button pButton type="button" label="重置" (click)="reset()"></button>
            </div>
        </form>
    </div>

    <p-dataTable [value]="products" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]">

        <p-column [style]="{'width':'10%;', 'margin-top': '20px;'}" field="selectAll" header="选择所有"></p-column>
        <p-column [style]="{'width':'20%', 'margin-top': '20px;'}" field="name" header="产品名称"></p-column>
        <p-column [style]="{'width':'20%', 'margin-top': '20px;'}" field="type" header="产品类型"></p-column>
        <p-column [style]="{'width':'20%', 'margin-top': '20px;'}" field="createTime" header="创建时间"></p-column>
        <p-column [style]="{'width':'30%', 'margin-top': '20px;'}" field="operation" header="操作">
            <template let-col let-product="rowData" pTemplate="body">
                <button type="button" pButton icon="fa-pencil" (click)="edit(product)" label="编辑"></button>
                <button type="button" pButton icon="fa-pencil" (click)="delete(product)" label="删除"></button>
                <button type="button" pButton icon="fa-plus-circle" (click)="addPlan()" label="添加计划单"></button>
            </template>
        </p-column>
    </p-dataTable>

    <p-dialog header="产品信息" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
        <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="product">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="name">产品名称</label></div>
                <div class="ui-grid-col-8"><input id="name" pInputText [(ngModel)]="product.name"/></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="type">产品类型</label></div>
                <div class="ui-grid-col-8"><input id="type" pInputText [(ngModel)]="product.type"/></div>
            </div>
        </div>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton icon="fa-check" (click)="save()" label="保存"></button>
                <button type="button" pButton icon="fa-times" (click)="cancel()" label="取消"></button>
            </div>
        </p-footer>
    </p-dialog>

</div>